<template>
<div class="main">
    <div class="BookrackBox">
        <!-- 顶部导航栏 -->
        <div class="topNav">
            <!-- <div class="logo"> -->
            <router-link to="/ReadThePage" tag="div" class="logo">
                <h2>猫七免费小说</h2>
            </router-link>
            <!-- </div> -->
            <div class="BookrackBoxFC">
                <!-- <div class="FCBox"> -->
                    <router-link tag="div" to="/search/search" class="FCBox">
                        <span class="iconfont icon-sousuo FCFT"></span>
                        <div class="FCtext">搜索</div>
                    </router-link>
                <!-- </div> -->
                <!-- <div class="FCBox"> -->
                    <!-- <router-link tag="div" to="/readHistory" class="FCBox">
                        <span class="iconfont icon-yuedulishi FCFT"></span>
                        <div class="FCtext">阅读历史</div>
                    </router-link> -->
                <!-- </div> -->
                <div class="FCBox" @click="moreShow = !moreShow">
                    <span class="iconfont icon-gengduo FCFT"></span>
                    <div class="FCtext">更多</div>
                </div>
                <div class="popupBox" v-show="moreShow">
                    <router-link tag="p" to="/member">
                    <span class="iconfont icon-VIP"></span>开通会员
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 签到 -->
        <div class="bgImg">
            <div class="recommend">
                <div class="recommendImg">
                    <img src="https://img1.baidu.com/it/u=3265757573,771467993&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500" alt="">
                </div>
                <div class="reText">
                    <span class="introduce"><span class="label">推荐</span>地球突变，混沌降临，万界开始文明复兴</span>
                    <p>《网游之诸天降临》</p>
                </div>
                <div class="signIn">
                    <p class="signInTitle">今日签到</p>
                    <p class="award"><span>+20</span>金币</p>
                    <div class="signInBtn" v-show="!signIn" @click="signIn=true">
                        <span>签到</span>
                    </div>
                    <div class="signInBtn succeed" v-show="signIn">
                        <span>签到成功</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 我的书架 -->
        <div class="BookrackLists">
            <router-link class="ListsBox" v-for="item in simplelist" :key="item.bookId" :to="'/ReadThePage?id='+item.bookId" tag="div">
            <!-- <div class="ListsBox" v-for="item in simplelist" :key="item.id"> -->
                <div class="ListsImg">
                    <img :src="item.cover" alt="">
                </div>
                <div class="ListsContent">
                    <!-- <p class="ContentTitle">{{item.title}}</p> -->
                    <p class="ContentTitle">{{item.title}}<span class="update">更新</span></p>
                    <p class="plan">阅读时间: 刚刚&nbsp;&nbsp;<span class="continue">继续阅读></span></p>
                    <!-- <p class="plan">读到: 第1774章 出阵&nbsp;&nbsp;<span class="continue">继续阅读></span></p> -->
                </div>
            <!-- </div> -->
            </router-link>
        </div>
        <!-- 底部 -->
        <div class="BCR">
            到底部啦!去书城看看吧
        </div>
    </div>
    <bottomNav></bottomNav>
</div>
</template>

<script>
import bottomNav from "../../components/base/bottomNav.vue";
import { getbookGetsub,getBookInfo } from  "../../api/TheWorkDetails";
// import {getBookCatalog} from '../../api/catalogueList';

export default {
    data(){
        return{
            moreShow:false,
            signIn:false,
            complexlist:[], // 详情接口
            simplelist:[], // 简单接口
            navPointListID:[], // 章节列表
            sectionIndex:0, // 看到的章节
        }
    },
    methods:{
        // 书籍详情接口
        getbookGetsubFun(id){
            getbookGetsub({id:id}).then(data=>{
                this.complexlist.push(data.feed)
            })
        },
        // 书籍简单详情
        getBookInfoFun(id){
            getBookInfo({sourceUuid:id}).then(data=>{
                this.simplelist.push(data.data.book)
            })
        },
        // 获取信息
        getInFoData(){
            for(let i = 0 ; i < this.$store.state.bookIDList.length ; i++){
                this.getbookGetsubFun(this.$store.state.bookIDList[i]);
                this.getBookInfoFun(this.$store.state.bookIDList[i]);
            }
            console.log("详情",this.complexlist);
            console.log("简单",this.simplelist)
        },
        // // 获取章节列表
        // getBookCatalogFun(id){
        //     getBookCatalog({tocId:id}).then(data=>{
        //         this.navPointListID = data.ncx.navMap.navPoint.navPoint;
        //         for(let i = 0 ; i < this.navPointListID.length;i++){
        //             this.listID.push({index:this.navPointListID[i].index,id:this.navPointListID[i].id,navLabel:this.navPointListID[i].navLabel.split(',')[1]});
        //         }
        //         console.log(this.listID)
        //         this.getReaderBookContentFun(this.listID[this.sectionIndex].id);
        //     })
        // }
    },
    components:{
        bottomNav,
    },
    created(){
        this.getInFoData();
        this.$store.state
    }
}
</script>

<style lang="less">
@import "../../assets/css/base.css";

.BookrackBox{
    width: 100%;
    background-color: #fff;
    .topNav{
        width: 100%;
        height: 50px;
        background-color: #ffd11b;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position:fixed;
        top: 0px;
        left: 0px;
        z-index: 3;
        .logo{
            margin-left: 10px;
            h2{
                line-height: 50px;
                font-size: 20px;
                font-weight: bold;
            }
        }
        .BookrackBoxFC{
            width: 30%;
            display: flex;
            text-align: center;
            justify-content: space-evenly;
            margin-top: 2px;
            position: relative;
            .FCFT{
                font-size: 22px;
                font-weight: bold;
            }
            .FCtext{
                font-size: 12px;
            }
            .popupBox{
                position: absolute;
                width: 100px;
                top: 50px;
                right: 5px;
                background-color: #fff;
                color: #333;
                padding: 15px;
                border-radius: 10px;
                box-shadow: 0px 0px 3px #ccc;
                span{
                font-size: 20px;
                }
            }
        }
    }
    .bgImg{
        width: 100%;
        height: 50px;
        margin-top: 50px;
        background-color: #ffd11b;
        padding-top: 10px;
        .recommend{
            width: 90%;
            height: 100px;
            margin: 0px auto;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #ccc;
            display: flex;
            justify-content: space-between;
            padding: 0px 12px;
            align-items: center;
            z-index: 1;
            .recommendImg{
                width: 60px;
                height: 80px;
                background-color: pink;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .reText{
                position: relative;
                width: 51%;
                padding: 0px 4px;
                padding-top: 2px;
                height: 66%;
                text-align: left;
                border-right: 1px solid #ccc;
                span.introduce{
                    font-weight: bold;
                    span.label{
                        font-size: 12px;
                        background-color: #fe5f1a;
                        color: #fff;
                        padding: 1px 2px;
                        border-radius: 5px;
                        margin-right: 4px;
                        font-weight: 400;
                    }
                }
                p{
                    position: absolute;
                    left: 2px;
                    bottom: 0px;
                    font-size: 14px;
                    color: #aaa;
                    line-height: 20px;
                }
            }
            .signIn{
                text-align: center;
                width: 22%;
                line-height: 22px;
                .signInTitle{
                    font-size: 13px;
                }
                .award{
                    font-size: 13px;
                    span{
                        font-size: 15px;
                        font-weight: bold;
                    }
                }
                .signInBtn{
                    font-size: 13px;
                    text-align: center;
                    background-color: #fdce0b;
                    border-radius: 50px;
                    padding: 1px 0px;
                }
                .succeed{
                    background-color: #eee;
                }
            }
        }
    }
    .BookrackLists{
        width: 90%;
        margin: 0px auto;
        margin-top: 70px;
        padding-bottom: 1px;
        .ListsBox{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 32px;
            margin-bottom: 20px;
            .ListsImg{
                width: 60px;
                height: 80px;
                background-color: aqua;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .ListsContent{
                width: 80%;
                .ContentTitle{
                    display: flex;
                    justify-content: space-between;
                    font-size: 17px;
                    font-weight: bold;
                    align-items: center;
                    .update{
                        background-color: #fdd90b;
                        font-size: 12px;
                        line-height: 20px;
                        height: 20px;
                        padding: 0px 4px;
                        border-radius: 4px;
                        font-weight: bold;
                    }
                }
                .plan{
                    color: #aaa;
                    font-size: 13px;
                    .continue{
                        font-size: 12px;
                        color: rgb(255, 187, 0);
                    }
                }
            }
        }
    }
    .BCR{
        text-align: center;
        margin-bottom: 15px;
        line-height: 30px;
        color: #aaa;
        padding: 30px 0px;
    }
}
</style>